import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyListView from '../../components/MyListView/MyListView';
import {routerRedux} from "dva/router";
import {distribution,distributionSearch,tianjiaGoods,myStorea} from './distribution.less';
import DistributionItem from "./distributionItem";
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import btn1 from '../../assets/svg/btn1.svg';
import btn2 from '../../assets/svg/btn2.svg';
import storeShare from '../../assets/svg/storeShare.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu,tishi} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";
import {myHead, myHeadTwo} from "../my/myHeader.less";
import {wxShare} from "../../utils/weixinShare";
import {IMAGE_DOMAIN,isWechat,GetQueryString} from "../../utils/common";

const Item = Popover.Item;




class MyStore extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            value:"",
            id:this.props.match.params.id
        };
        this.AlloyTouch = null;

    }
    showModal = (e) => {
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    };
    componentDidMount(){
        this.refresh().then(result=>{
            if(result.code==200&&isWechat()){
                wxShare(location.href.slice(0,location.href.indexOf("?")),IMAGE_DOMAIN+result.ret.logo);
            }
        });
        console.log(111)
    }
    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    refresh = () => {
        return this.props.dispatch({ type: 'distribution/myStoreDetailEFF',obj:{recommendId:this.state.id,pageNo:1 } });
    }

    loadMore = () => {
        const {dispatch,distribution} = this.props;
        console.log(distribution.sortField )
        return this.props.dispatch({ type: 'distribution/myStoreDetailEFF', obj:{recommendId:this.state.id,pageNo:this.props.distribution.pageNo+1 ,sortField:distribution.sortField ,
                sortOrder:distribution.sortOrder } });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    changeOrder = ( sortField, sortFeild ) =>{
        console.log(sortField, sortFeild)
        this.AlloyTouch.to(0);
        this.props.dispatch({
            type: 'distribution/myStoreDetailEFF',
            obj:{
                pageNo:1,
                recommendId:this.state.id,
                sortField:sortField,
                sortOrder:sortFeild
            }
        });
    }

    render() {
        const {dispatch,distribution} = this.props;
        const {myStoreDetailList} = this.props.distribution;
        return ( <Flex direction="column" className={distributionSearch} style={{height:"100%" ,position:'relative',}}>
                <div className={myStorea}>
                    <WingBlank>
                        <Flex justify="between" className="header_icon">
                            <Icon type="left" style={{color:"#fff"}} onClick={()=>{
                                this.props.dispatch(routerRedux.goBack());
                            }}></Icon>
                            <Icon type={storeShare.id} style={isWechat()?{}:{opacity:"0"}} onClick={()=>{
                                this.showModal();
                            }}></Icon>
                        </Flex>
                        <Flex style={{paddingBottom:".3rem"}}>
                            <div style={{width:"1.2rem",height:"1.2rem",borderRadius:"100%"}}>
                                <NoLazyImg src={distribution.logo?distribution.logo:""} style={{height:"1.2rem",width:"1.2rem",borderRadius:"100%"}} alt=""/>
                            </div>
                            <div style={{color:"#ffffff",marginLeft:".3rem"}}>
                                <Flex style={{marginBottom:".2rem"}}>
                                        <div className="name" >{ distribution.storeName }</div>
                                </Flex>
                                <Flex>
                                    <div>共{ distribution.goodsNum}件商品</div>
                                </Flex>
                            </div>
                        </Flex>
                    </WingBlank>
                </div>
                {myStoreDetailList[0]? <Flex className={goods_search_header} style={{marginBottom:".15rem"}}>
                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('', distribution.sortField =='' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={distribution.sortField ==''?{marginRight: '.04rem',color:"#ff0036"}:{marginRight: '.04rem'}}>综合</span>
                        {/*<Icon  type={*/}
                        {/*filter.sortField =='' ? (filter.sortOrder=="asc" ? updown3.id : updown2.id) :  updown1.id*/}
                        {/*}/>*/}
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('salenum', distribution.sortField =='salenum' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>销量</span>
                        <Icon  type={
                            distribution.sortField =='salenum' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('goodsStorePrice',distribution.sortField =='goodsStorePrice' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>价格</span>
                        <Icon  type={
                            distribution.sortField =='goodsStorePrice' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>
                </Flex>:""}
                {myStoreDetailList[0]? <MyListView
                    style={{height:"100%"}}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.refresh }
                    loadMore={ this.loadMore }
                    hasMore={ this.props.distribution.myStorelist.pageNo * this.props.distribution.myStorelist.pageSize < this.props.distribution.myStorelist.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return <DistributionItem v={v} myStore={true} refresh={this.refresh} key={i} dispatch={dispatch}></DistributionItem>
                    }}
                    data={ myStoreDetailList }>
                </MyListView>:<div style={{width: "100%", height: "8rem", background: "#f6f6f6"}}>
                    <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "3rem auto 0"}} />
                    <p style={{fontSize: ".3rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无商品...</p>
                </div>}
                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose}
                    // animationType="slide-down"
                    className={tishi}
                    maskClosable={true}
                    transparent={true}
                >
                    <Flex justify="end" style={{width:"100%"}}>
                        <Icon type={btn2.id} style={{width:"4rem",height:"3rem",position:"relative",bottom:".5rem"}}></Icon>
                    </Flex>
                <Flex justify="center" style={{width:"100%",marginTop:"3.5rem"}}>
                    <Icon type={btn1.id} style={{width:"3rem",height:"3rem"}} onClick={this.onClose}></Icon>
                </Flex>
                </Modal>
            </Flex>

        )
    }
}

export default connect(({ distribution }) => ({ distribution}))(MyStore);